<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script>
        let webSocket;
        let socketId;
        $(
            function () {
                webSocket = new WebSocket('ws://localhost:8080/webSocketTest/小强');
                webSocket.onopen = function (event) {
                    console.log('webSocket已连接');
                    console.log(webSocket);
                }
                webSocket.onclose = function (event) {
                    console.log('webSocket已关闭连接');
                };
                webSocket.onmessage = function (event) {
                    console.log(event);
                    console.log('接收到消息：' + event.data);
                };
                webSocket.onerror = function (event) {
                    console.log('WebSocket出现错误！，', event);
                };

                let close = $("#close");
                let send = $("#send");

                close.click(function () {
                    webSocket.close();
                });
                send.click(function () {
                    webSocket.send('hello webSocket');
                    console.log('消息已发送');
                });
            }
        );
    </script>
</head>
<body>
<input id="close" type="button" value="关闭webSocket"> <br>
<input id="send" type="button" value="发送消息">
</body>
</html>